<template>
	<view class="chart">
		<view class="change-btn">
			<view :class="isMonth ? 'select-date' : 'date'" @click="handleChangeType(true)">本月</view>
			<view :class="{ 'select-date': !isMonth, date: isMonth, years: true }" @click="handleChangeType(false)">本年</view>
		</view>
		<LEchart v-show="yearXAxisData.length || monthXAxisData.length" ref="tendencyEcharts" @finished="init"></LEchart>
    <fui-empty v-show="!yearXAxisData.length && !monthXAxisData.length" src="/static/images/empty/data.png" title="暂无数据" size="24" width="300" height="auto" marginTop="20" color="#999"></fui-empty>
	</view>
</template>

<script setup>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts';
import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
import { watch, ref, onMounted } from 'vue';

const props = defineProps({
  yearXAxisData: {
    type: Array,
    default: () => []
  },
  yearYAxisData: {
    type: Array,
    default: () => []
  },
  monthXAxisData: {
    type: Array,
    default: () => []
  },
  monthYAxisData: {
    type: Array,
    default: () => []
  }
})

const option = ref({
	color: '#2C83FC',
	// title: {
	// 	text: 'Stacked Area Chart'
	// },
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'cross',
			label: {
				backgroundColor: '#6a7985'
			}
		}
	},
	legend: {
    show: false,
		data: ['销售额']
	},
	// toolbox: {
	// 	feature: {
	// 		saveAsImage: {}
	// 	}
	// },
	grid: {
    top: '20',
		left: '3%',
		right: '4%',
		bottom: '3%',
		containLabel: true
	},
	xAxis: [
		{
			type: 'category',
			boundaryGap: false,
			data: []
		}
	],
	yAxis: [
		{
			type: 'value'
		}
	],
	series: [
		{
			symbol: 'none',
			name: '销售额',
			type: 'line',
			label: {
				show: true,
				position: 'top'
			},
			areaStyle: {},
			emphasis: {
				focus: 'series'
			},
			areaStyle: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{
						offset: 0,
						color: 'rgba(45, 131, 252,0.8)'
					},
					{
						offset: 1,
						color: 'rgba(250, 250, 250,0.8)'
					}
				])
			},
			data: []
		}
	]
});

const tendencyEcharts = ref(null);

const renderChart = () => {
  option.value.xAxis[0].data = isMonth.value ? props.monthXAxisData : props.yearXAxisData
  option.value.series[0].data = isMonth.value ? props.monthYAxisData : props.yearYAxisData
  tendencyEcharts.value.init(echarts, (chart) => {
		chart.setOption(option.value);
	});
}

watch(props, () => {
  renderChart()
}, {
  deep: true
})

const handleChangeType = (isMonthType) => {
  isMonth.value = isMonthType
  renderChart()
}
// 渲染完成
const init = () => {
	console.log('渲染完成');
};

const isMonth = ref(true);
</script>

<style lang="scss" scoped>
.chart {
  position: relative;

  .change-btn {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 24rpx;
    font-weight: 400;
    padding: 20rpx;
    transform: translateY(-100%);

    .select-date {
      background: var(--fui-color-primary);
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      padding: 4rpx 22rpx 2rpx;
      color: #ffffff;
    }

    .date {
      background: #ffffff;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      border: 2rpx solid var(--fui-color-primary);
      color: var(--fui-color-primary);
      padding: 4rpx 22rpx 2rpx;
    }

    .years {
      margin-left: 20rpx;
    }
  }

  .lime-echart {
    overflow: hidden;
    background-color: #fff;
    border-radius: 16rpx;
    margin-top: 20rpx;
  }

  .fui-empty__wrap {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 80rpx 0;
  }
}
</style>
